// UTILITIES
// -----------------------------------------------------------------------------
@use 'sass:math';
@use 'sass:meta';

$default-browser-font-size: 16px;
$base-font-size: 16px;

/// Returns the value in rem for a given pixel value.
/// @param {Number} $value - The pixel value to be converted.
/// @return {Number} The converted value in rem.

@function rem($value) {
  $unit: math.unit($value);

  @if $unit == 'rem' {
    @return $value;
  } @else if $unit == 'px' {
    @return calc($value / $base-font-size * 1rem);
  } @else if $unit == 'em' {
    @return calc($unit / 1em * 1rem);
  } @else {
    @error 'Value must be in px, em, or rem.';
  }
}

@function em($pixels, $context: $default-browser-font-size) {
  @return #{calc($pixels/$context)}em;
}

/// Returns the list of available names in a given map.
/// @param {Map} $map - The map of data to list the names from.
/// @param {Number} $map - The level of depth to get names from.
/// @return {String} The list of names in the map.

@function available-names($map, $level: 1) {
  @if type-of($map) != 'map' {
    @return null;
  }

  $output: '';
  $newline: '\A ';

  @if $level == 1 {
    @each $key, $value in $map {
      $output: $output + '#{$newline}- #{$key} #{available-names($value, $level + 1)}';
    }
  } @else {
    $output: '(';
    $i: 1;

    @each $key, $value in $map {
      $sep: if($i < length($map), ', ', '');
      $output: $output + '#{$key}#{$sep}#{available-names($value, $level + 1)}';
      $i: $i + 1;
    }

    $output: $output + ')';
  }

  @return $output;
}
